<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <div class="main_content_topimg">
          <img src="/user.png" alt="">
        </div>
        <div class="main_content_avatar">
          <el-upload
          action="#"
          :show-file-list="false"
          :http-request="uploadCos"
          >
            <el-avatar size="large" :src="avatarUrl" class="avatar_img"/>
          </el-upload>
          <div style="width: 150px;margin-left: 30px;">
            <el-progress v-if="ifProgress" :percentage="percentage" />
            <p v-if="!ifProgress" style="font-size: 12px;margin-left: 13px;color: #999999;">点击修改头像</p>
          </div>
        </div>
        <div class="main_content_form">
          <el-form
            label-position="right"
            label-width="120px"
            :model="userData"
            style="max-width: 450px"
          >
            <el-form-item label="用户名" size="large">
              <el-input v-model="userData.username" />
            </el-form-item>
            <el-form-item label="性别" size="large">
              <el-input v-model="userData.sex" />
            </el-form-item>
            <el-form-item label="学院" size="large">
              <el-input v-model="userData.college" />
            </el-form-item>
            <el-form-item label="生日" size="large">
              <el-date-picker
                v-model="userData.birthday"
                type="date"
                placeholder="选择日期"
                size="large"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="QQ" size="large">
              <el-input v-model="userData.qqId" />
            </el-form-item>
            <el-form-item size="large" class="userInfo_button">
              <el-button type="danger" @click="logoutClick">
                <i class="iconfont nt-logout"></i>
                &nbsp;
                <p>退出登录</p>
              </el-button>
              <div></div>
              <el-button type="primary" @click="updateUserClick">
                <i class="iconfont nt-baocun"></i>
                &nbsp;
                <p>保存修改</p>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref , onMounted } from 'vue';
import { useRouter } from 'vue-router'
import '@/assets/font/iconfont.css';
import COS from 'cos-js-sdk-v5'
// 引入pinia中的useStore库
import { useStore } from '@/stores/userData'
// 引入storeToRefs，使普通数据变为响应式数据
import { storeToRefs } from "pinia";
// 接收useStore
const store = useStore()
// 解构并使数据具有响应式
const { userData } = storeToRefs(store);
onMounted(()=>{
  avatarUrl.value = userData.value.avatar
})
const router = useRouter()
const percentage = ref(0)
const ifProgress = ref(false)
const avatarUrl = ref('')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDRhgOr3ze4D6i4A1buxjETTCeqmSr0tVq', // 身份识别ID
  SecretKey: '5tSkmY4JGwMWP4TcU5PSEjxvd4E7k7DA' // 身份秘钥
})
// 上传腾讯云cos操作
const uploadCos = (res) => {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'notewk-1304925042', /* 存储桶 */
      Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file, // 上传文件对象
      onProgress: (progressData) => { // 上传进度
        ifProgress.value = true
        percentage.value = progressData.percent*100
        console.log(progressData)
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        avatarUrl.value = `https://${data.Location}`
        ifProgress.value = false
        console.log(avatarUrl.value);
        userData.value.avatar = avatarUrl.value
      }
    })
  }
}
// 更改用户信息
const updateUserClick = () => {
  store.updateUserDataByPinia(avatarUrl.value)
  router.push('/')
}
const logoutClick = () => {
  localStorage.removeItem('user')
  router.push('/login')
}
</script>
<style scoped lang="scss">
.container{
  height: 100vh;
  position: relative;
}
.main{
  height: 90vh;
  width: 100%;
  position: absolute;
  background-color: #fff;
  top: calc(50% - 45vh);
  transition: 0.5s;
  overflow: hidden;
}
.main_content{
  height: 90vh;
  width: 100%;
}
.main_content_topimg{
  height: 130px;
  overflow-y:hidden;
  img{
    width: 100%;
    z-index: 0;
  }
}
.main_content_avatar{
  position: relative;
  height: 110px;
  margin-top: -50px;
  z-index: 1;
}
.avatar_img{
  position: relative;
  left: calc(63%);
  --el-avatar-size: 70px;
  box-shadow: 2px 2px 20px 4px #00000030
}
.main_content_form{
  height: auto;
}
.userInfo_button:deep(.el-form-item__content){
  margin-top: 10px;
  display: grid;
  grid-template-columns: 45% auto 45%;
  button{
    border-radius: 50px;
  }
}
:deep(.el-input__wrapper){
  border-radius: 20px;
}
</style>